<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        data与el的2种写法
            1.el有2种写法
                （1）.newVue时候配置el属性。
                （2）.先创建Vue实例。随后再通过vm.$mount（#root）指定e1的值。
            2.data有2种写法
                 (1) .对象式
                 (2) .函数式
                 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
            3.一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了而是 windows。
    -->

    <div id="root">
        <h1>{{name}}</h1>
    </div>

    <script type="text/javascript">
        // 创建一个 Vue 实例
        const v = new Vue({
            // el : "#root",
            // data : {
            //     name : "lee"
            // }
            data() {
                return {
                    name : "lee"
                }
            }
        })
        console.log(v)
        setTimeout(() => {
            v.$mount("#root") // 更灵活
        }, 1000);
    </script>
    
</body>
</html>